<template>
  <div class="container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true">
        <el-form-item label="媒体编号">
          <el-input 
            v-model="searchForm.keynumbers" 
            placeholder="请输入媒体编号，多个用英文逗号分隔"
          />
        </el-form-item>
        <el-form-item label="媒体类型">
          <el-select 
            v-model="selectedType" 
            placeholder="选择媒体类型"
            @change="handleTypeChange"
            style="width: 240px"
          >
            <el-option 
              label="全部"
              value="all"
            />
            <el-option 
              v-for="type in types" 
              :key="type.id" 
              :label="type.name" 
              :value="type.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table 
        :data="mediaList" 
        style="width: 100%"
        v-loading="loading"
        @sort-change="handleSortChange"
      >
        <el-table-column 
          prop="city" 
          label="城市" 
          sortable="custom"
        />
        <el-table-column 
          prop="keynumber" 
          label="媒体编号" 
          sortable="custom"
        />
        <el-table-column 
          prop="typeName" 
          label="媒体类型名称" 
          sortable="custom"
        />
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="page.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { mediaApi } from './api/media'

export default {
  name: 'App',
  setup() {
    // 搜索表单数据
    const searchForm = reactive({
      keynumbers: ''
    })

    // 分页数据
    const page = reactive({
      current: 1,
      size: 10,
      total: 0
    })

    const loading = ref(false)
    const mediaList = ref([])

    // 添加排序相关的状态
    const sort = reactive({
      prop: '',
      order: ''
    })

    // 添加媒体类型相关的状态
    const types = ref([])
    const selectedType = ref('all')

    // 获取媒体类型列表
    const fetchTypes = async () => {
      try {
        const res = await mediaApi.getTypes()
        types.value = res.data
      } catch (error) {
        console.error('获取媒体类型失败:', error)
        ElMessage.error('获取媒体类型失败')
      }
    }

    // 处理类型选择变化
    const handleTypeChange = () => {
      page.current = 1 // 重置到第一页
      handleSearch() // 直接调用查询方法
    }

    // 查询方法
    const handleSearch = async () => {
      loading.value = true
      try {
        // 构建查询参数
        const params = {
          page: page.current,
          size: page.size
        }

        // 添加编号查询条件
        if (searchForm.keynumbers) {
          params.keynumbers = searchForm.keynumbers
        }

        // 添加类型查询条件
        if (selectedType.value && selectedType.value !== 'all') {
          params.type = types.value.find(t => t.name === selectedType.value)?.id
        }

        const res = await mediaApi.search(params)
        
        // 更新列表数据
        mediaList.value = res.data.content
        // 更新总数
        page.total = res.data.totalElements
      } catch (error) {
        console.error('查询失败:', error)
        ElMessage.error('查询失败')
      } finally {
        loading.value = false
      }
    }

    // 分页方法
    const handleSizeChange = (val) => {
      page.size = val
      page.current = 1  // 改变分页大小时重置为第一页
      handleSearch()
    }

    const handleCurrentChange = (val) => {
      page.current = val
      handleSearch()
    }

    // 处理排序变化
    const handleSortChange = ({ prop, order }) => {
      sort.prop = prop
      sort.order = order
    }

    // 添加重置方法
    const handleReset = () => {
      // 重置查询条件
      searchForm.keynumbers = ''
      selectedType.value = 'all'
      // 重置分页
      page.current = 1
      page.size = 10
      // 重置排序
      sort.prop = ''
      sort.order = ''
      // 重新查询数据
      handleSearch()
    }

    // 组件挂载时初始化
    onMounted(async () => {
      await fetchTypes() // 先获取类型列表
      handleSearch()     // 然后查询所有数据
    })

    return {
      searchForm,
      page,
      loading,
      mediaList,  // 直接使用 mediaList 而不是 paginatedList
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleSortChange,
      types,
      selectedType,
      handleTypeChange,
      handleReset
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.search-card {
  margin-bottom: 20px;
}
.table-card {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
/* 添加按钮间距 */
.el-button + .el-button {
  margin-left: 10px;
}
</style>
